<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>手风琴</title>
	<style type="text/css">
		*{
			list-style: none;
		}
		ul{
			width: 1300px;
			margin: 50px auto;
		}
		li{
			width: 172px;
			height: 260px;
			float: left;
			background-color: red;
			overflow: hidden;
			background: #fff url(http://wiki.xuebingsi.com/demo/1.jpg) center no-repeat;
		}
		img{

		}
	</style>
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('li').hover(function() {
				// $(this).css('width', '400px').siblings().css('width', '134px');
				$(this).stop().animate({width:'400px'},500).siblings().stop().animate({width:'134px'});
			}, function() {
				$(this).stop().animate({width:'172px'}, 500).siblings().stop().animate({width:'172px'});
			});
		})
	</script>
</head>
<body>
	<ul>
		<li><img src="" alt=""></li>
		<li><img src="" alt=""></li>
		<li><img src="" alt=""></li>
		<li><img src="" alt=""></li>
		<li><img src="" alt=""></li>
		<li><img src="" alt=""></li>
		<li><img src="" alt=""></li>
	</ul>
</body>
</html>